<template>
  <div class="expert">
    <van-swipe
      :width="180"
      :height="230"
      :loop="false"
      :show-indicators="false"
      indicator-color="white"
    >
      <van-swipe-item v-for="item in expertList" :key="item.id">
        <div class="expert-content">
          <div class="expert-div">
            <div class="expert-img">
              <img :src="item.headPortrait" alt="" />
            </div>
            <div>
              <div>{{ item.expertInquiryName }}</div>
            </div>
            <div class="expert-button">
              <button class="consult">咨询</button>
              <button class="order" @click="expertOrder(item)">预约</button>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
import { useExpert } from '../home'
import { useRouter } from 'vue-router'

const router = useRouter()

const { expertList } = useExpert()

const expertOrder = (item: any) => {
  router.push({
    path: '/expert-details',
    query: {
      id: item.id,
      userId: item.userId,
      tenantId: item.tenantId,
    },
  })
}
</script>

<style lang="less" scoped>
.expert {
  /deep/.van-swipe__track {
    padding-right: 30px;
  }
}

.expert-content {
  height: 90%;
  background-color: white;
  margin: 5% 5px;
  border-radius: 10px;
  font-size: 13px;
  padding: 10px;
  box-shadow: 0px 0px 4px #aaaaaa;
  .expert-div {
    text-align: center;
    color: #646566;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .expert-img {
      width: 70px;
      height: 70px;
      margin: 0 auto;
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
    }
    .consult-teacher {
      color: grey;
      margin-top: 5px;
    }
    .expert-button {
      display: flex;
      justify-content: space-between;

      button {
        width: 60px;
        height: 28px;
        border: none;
        border-radius: 15px;
      }

      .consult {
        border: 1px solid rgb(97, 187, 131);
        background-color: white;
      }

      .order {
        background-color: rgb(97, 187, 131);
        color: white;
      }
    }
  }
}
</style>
